import React, { memo } from 'react';
import { renderRoutes } from 'react-router-config';
import { NavLink } from 'react-router-dom';

// 什么时候带 {}  和什么时候不带 {}
import request from '../../network/request';
import { dicoverMenu } from 'common/local-data';
import {
    DiscoverWrapper,
    TopMenu
} from './style'

export default memo(function YDiscover(props) {
    const { route } = props; 
    // 数组里 是依赖 当数组里的值发生改变后 useEffect 里的方法再次执行
    // return 里的方法是组件注销后的执行的方法
// 数据请求可以在这里去完成 当然最好的 
// 我不建议这个简单的不可变的轮播图数据也要放到redux 里去管理
// 但是 练习项目 我们还是要把它放到redux 里去

    // useEffect(() => {
    //     request({
    //         url:'/banner'
    //     }).then((res)=>{
    //         console.log(res.banners);
    //     })
    // }, [])

    return (
        <DiscoverWrapper>
            <div className="top">
                <TopMenu className="wrap-v1">
                    {
                        dicoverMenu.map((item,index)=>{
                            return (
                            <div className="item" key={item.title}>
                                <NavLink to={item.link}>{item.title}</NavLink>
                            </div>
                            )
                        })
                    }
                </TopMenu>
            </div>
        {/*
             renderRoutes 是 react-router-config 里的一个组件 方法
            他的功能是根据路由 来显示与路由匹配的组件
            需要把router 来做一一映射的关系
            renderRoutes函数里要传入的是  YDiscover这个组件里的所有的子路由
        */}
        { renderRoutes(route.routes) }
        </DiscoverWrapper>
    )
})
